search: Show spinner while searching

Ongoing operations are usually represented by an animation, so
the static "Searching…" label may appear as if the operation was
stuck.

Address this by adding a spinner to indicate that a search has
been started, but there aren't any results yet.

Closes: https://gitlab.gnome.org/GNOME/gnome-shell/-/issues/8244
Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/3827>

diff --git a/data/theme/gnome-shell-sass/widgets/_search-results.scss b/data/theme/gnome-shell-sass/widgets/_search-results.scss
index b89205597a68ce0d2ea0ba9782fa30aa6ae68aba..1fddc3617cee616187ef319048cbd6724b5b7c33 100644 (file)
--- a/data/theme/gnome-shell-sass/widgets/_search-results.scss
+++ b/data/theme/gnome-shell-sass/widgets/_search-results.scss
@@ -40,6 +40,10 @@
   border-radius: $base_border_radius * 1.65;
 }
 
+.search-statusbox {
+    spacing: $base_padding * 4;
+}
+
 // "no results" text
 .search-statustext {
   @extend %title_1;

diff --git a/js/ui/search.js b/js/ui/search.js
index 9b513136d6839a14cf9b9b273fb8717483d50acb..44db1ac75c1767f5a79118c1da8a75761fc19025 100644 (file)
--- a/js/ui/search.js
+++ b/js/ui/search.js
@@ -14,10 +14,12 @@ import * as RemoteSearch from './remoteSearch.js';
 import {ensureActorVisibleInScrollView} from '../misc/animationUtils.js';
 
 import {Highlighter} from '../misc/util.js';
+import {Spinner} from './animation.js';
 
 const SEARCH_PROVIDERS_SCHEMA = 'org.gnome.desktop.search-providers';
 
 const MAX_LIST_SEARCH_RESULTS_ROWS = 5;
+const SEARCH_SPINNER_SIZE = 64;
 
 const MaxWidthBox = GObject.registerClass(
 class MaxWidthBox extends St.BoxLayout {
@@ -586,16 +588,23 @@ export const SearchResultsView = GObject.registerClass({
 
         this.add_child(this._scrollView);
 
-        this._statusText = new St.Label({
-            style_class: 'search-statustext',
+        this._statusContainer = new St.BoxLayout({
+            style_class: 'search-statusbox',
+            orientation: Clutter.Orientation.VERTICAL,
+            x_expand: true,
+            y_expand: true,
             x_align: Clutter.ActorAlign.CENTER,
             y_align: Clutter.ActorAlign.CENTER,
         });
-        this._statusBin = new St.Bin({
-            y_expand: true,
-            child: this._statusText,
-        });
-        this.add_child(this._statusBin);
+
+        this._statusSpinner = new Spinner(SEARCH_SPINNER_SIZE);
+
+        this._statusText = new St.Label({style_class: 'search-statustext'});
+
+        this._statusContainer.add_child(this._statusSpinner);
+        this._statusContainer.add_child(this._statusText);
+
+        this.add_child(this._statusContainer);
 
         this._highlightDefault = false;
         this._defaultResult = null;
@@ -825,13 +834,16 @@ export const SearchResultsView = GObject.registerClass({
         });
 
         this._scrollView.visible = haveResults;
-        this._statusBin.visible = !haveResults;
+        this._statusContainer.visible = !haveResults;
 
         if (!haveResults) {
-            if (this.searchInProgress)
-                this._statusText.set_text(_('Searching…'));
-            else
+            if (this.searchInProgress) {
+                this._statusSpinner.play();
+                this._statusText.set_text(_('Searching'));
+            } else {
+                this._statusSpinner.stop();
                 this._statusText.set_text(_('No results'));
+            }
         }
     }